.profile {
    position: relative;
    width: 150px;
    text-align: center;

    .icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: #7B7B7B;
        border-radius: 50%;
        font-size: 12px;
        text-align: center;
        line-height: 20px;
        margin: 7px;
        cursor: pointer;
        color: #ffffff;
        vertical-align: middle;
    }

    .dirction {
        .icon;

        &:hover {
            background-color: #b693fc;
        }

        &.active {
            background-color: #5503FA;
        }
    }

    .profileIcon {
        .icon;

        &.active {
            transform: rotate(180deg);
        }
    }
}